<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>混合模式</title>
	<style type="text/css">
	*{margin: 0px;padding: 0px;}
	ul,li{
		list-style: none;
	}
	ul li{
		width: 200px;
		height: 100px;
		background: yellow;
		margin-bottom: 20px;
		border:2px solid red;
		filter: alpha(opacity:30);//IE
		opacity:0.3;
	}
	</style>
	<script type="text/javascript">
		window.onload=function(){

			var Li1 = document.getElementById('li1');
			Li1.onmouseover=function(){
				startMove(Li1,'width',400,function(){
					startMove(Li1,'height',200,function(){
						startMove(Li1,'opacity',30);
					});
				});
			}
			Li1.onmouseout=function(){
				startMove(Li1,'opacity',100,function(){
					startMove(Li1,'height',100,function(){
						startMove(Li1,'width',200);
					});
				})
			}
		}

		function startMove(obj,attr,iTarget,fn){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
			//1.取当前的值
			var icur = 0;
			if (attr == 'opacity') {
				icur = Math.round(parseFloat(getStyle(obj,attr))*100);
			}else{
				var icur=parseInt(getStyle(obj,attr));
			}	
			//2.算速度		
			var speed =(iTarget-icur)/8;
			speed =speed>0?Math.ceil(speed):Math.floor(speed);
			//3.检测停止
			if (icur==iTarget) {
				clearInterval(obj.timer);
				if (fn) {
					fn();
				}
			}else{
				if (attr == 'opacity') {
					obj.style.filter='alpha(opacity:'+(icur+speed)+')';
					obj.style.opacity = (icur+speed)/100;
				}else{
					obj.style[attr] = icur + speed + 'px';
				}
			}
			},30)
		}
		
		function getStyle(obj,attr){
			if (obj.currentStyle) {
				return obj.currentStyle[attr];//IE
			}else{
				return getComputedStyle(obj,false)[attr];//火狐
			}
		}
	</script>
</head>
<body>
	<ul>
		<li id="li1"></li>
	</ul>
</body>
</html>